<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stylecClass</title>
</head>
<body>
<div class="static active text-danger"></div>
<div id="app">
    <div v-bind:class="classObject"></div>
</div>
</body>
<script src="./js/vue.js" type="application/javascript"></script>
<script type="application/javascript">
    new Vue({
        el:'#app',
        data:{
            isActive:true,
            error:{
                value:true,
                type:'fatal'
            }
        },
        computed:{
            classObject:function () {
                return{
                    base : true,
                    active:this.isActive && !this.error.value,
                    'text-danger':this.error.value && this.error.type === 'fatal'
                }
            }
        }
    })
</script>
</html>